<template>
	<view class="login">
		<view class="registerText" @tap="toRegister">注册</view>
		<view class="loginBox">
			<view class="loginBox-item">
				<text class="iconfont icon-shouji"></text>
				<input class="telPhone" placeholder="请输入手机号"  v-model="formData.phoneNum"/>
			</view>
			<view class="loginBox-item" v-if="loginType==0">
				<text class="iconfont icon-mima"></text>
				<input password="true" class="telPhone" placeholder="请输入密码" v-model="formData.passWord" />
			</view>
			<view class="loginBox-item getVCodeItem" v-if="loginType==1">
				<text class="iconfont icon-yanzhengma"></text>
				<input  class="telPhone" v-model="formData.vCode"/>
				<text class="getVCode" @tap.stop="getVCode">获取验证码</text>
			</view>
			<view class="loginBox-item" style="border: none;">
				<button @tap.stop="checkLogin" :class="{disabled:!(formData.phoneNum&&(formData.passWord||formData.vCode))}" class="btnLogin" :disabled="!(formData.phoneNum&&(formData.passWord||formData.vCode))">登陆</button>
			</view>
		</view>
		<view class="loginType" @tap="loginType=loginType==0?1:0">
			{{loginType==0?"验证码登陆>":"密码登陆>"}}
		</view>
	</view>
</template>

<script>
	import {mapActions} from "vuex";
	export default {
		data() {
			return {
				formData:{
					phoneNum:"",
					passWord:"",
					vCode:""
				},
				//0代表密码登陆，1代表验证码登陆
				loginType:0
			};
		},
		methods:{
			...mapActions(["setUserInfo"]),
			//获取验证码
			getVCode(){
				
				
			},
			checkLogin(){
				if(this.loginType==0){
					//用户名密码登陆
					uni.showLoading({
						title:"正在登陆"
					});
					const LOGIN_URL=`https://www.softeem.xin/d.api/user/api/login?password=Ej8k3umchBMe%2F%2FsEytuzXw%3D%3D%0A&t=${Date.now()}&appname=budejie&market=baidu&client=android&mac=9a:5f:19:b0:5c:ae&visiting=&countrycode=86&udid=863595494315117&phonenum=${this.formData.phoneNum}&os=5.1.1&ver=8.0.1`;
					uni.request({
						url:LOGIN_URL,
						success:res=>{
							if(res.data.msg=="成功"){
								//登陆成功
								this.setUserInfo(res.data.info);
								uni.switchTab({
									url:"/pages/me/me"
								});
							}
							else{
								uni.showToast({
									title:"登陆失败"
								});
							}
						},
						fail: (err) => {
							console.log(JSON.stringify(err));
							uni.showToast({
								title:"登陆失败"
							});
						},
						complete: () => {
							uni.hideLoading();
						}
					})
				}
			},
			toRegister(){
				uni.navigateTo({
					url:"/pages/register/register"
				});
			}
		}
	}
</script>

<style scoped>
	page{
		color: white;
	}
	.login{
		overflow: hidden;
		position: relative;
	}
	.loginBox{
		box-sizing: border-box;
		padding: 0px 100upx;
		margin-top: 30vw;
	}
	.loginBox-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 50upx 20upx;
		padding: 20upx;
		border-bottom: 1px solid lightgray;		
	}
	.loginBox-item .iconfont{
		font-size: 32upx;
		color: gray;
	}
	.telPhone{
		color: gray;
		font-size: 32upx;
		width: 100%;
		margin-left: 20px;
	}
	.btnLogin{
		background-color: #e21145 !important;
		color: white !important;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50upx;
		font-size: 32upx;
		border: none;
	}
	.btnLogin.disabled{
		opacity: 0.4;
	}
	.loginType{
		display: flex;
		justify-content: center;
		color:gray;
		margin-top: 50upx;
	}
	.loginBox-item.getVCodeItem > .telPhone{
		flex: 1;
	}
	.getVCode{
		font-size: 28upx;
		color: #ff002d;
	}
	.registerText{
		color: gray;
		position: absolute;
		right: 20upx;
		top: 20upx;
	}
</style>
